<template>
  <div class="div">
    <div class="box" v-for="(item, index) in list" :key="index">
      <p>{{ item.name }}</p>
      <p>{{ item.num }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.nums();
  },
  methods: {
    nums() {
      this.$axios.get("/json/list.json").then((res) => {
        console.log(res.data);

        this.list = res.data;
      });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.div {
  display: flex;
  padding: 20px;
  .box {
      margin-right: 20px;
    width: 180px;
    height: 100%;
    border-radius: 5px;
    background: orangered;
  }
}
</style>